<!--
 * @Author: 张鹏
 * @Date: 2025-07-10 17:28:36
 * @LastEditors: zhangp zhangp@163.com
 * @LastEditTime: 2025-07-10 17:31:21
 * @FilePath: \mapbox\src\views\example\DynamicStyle.vue
 * @Description: 
 * 
-->
<!--
 * @Description: 动态根据zoom自动切换远程style.json示例
 * @Usage: 缩放地图时，自动切换不同的地图样式（远程style.json），无需手动选择
-->
<template>
  <div class="map-page">
    <div id="map" class="map-container"></div>
    <div class="style-info">
      <span>当前样式：</span>
      <span class="style-url">{{ currentStyleName }}</span>
      <span>（随缩放自动切换）</span>
      <br />
      <span>当前缩放等级：<b>{{ zoomLevel }}</b></span>
      <br />
      <span>当前地形（投影）：<b>{{ projectionType }}</b></span>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import Map from '289-map'

// 远程 style.json 配置
const styleList = [
  {
    min: 0, max: 5,
    url: 'https://demotiles.maplibre.org/style.json',
    name: 'MapLibre 官方'
  },
  {
    min: 5, max: 10,
    url: 'https://api.maptiler.com/maps/basic/style.json?key=qC0veBxoTx1YwVioOuvc',
    name: 'MapTiler Basic'
  },
  {
    min: 10, max: 24,
    url: 'https://api.maptiler.com/maps/streets/style.json?key=qC0veBxoTx1YwVioOuvc',
    name: 'MapTiler Streets'
  }
]

const currentStyleUrl = ref(styleList[0].url)
const currentStyleName = ref(styleList[0].name)
let map
let lastStyleUrl = styleList[0].url

const zoomLevel = ref(3)
const projectionType = ref('mercator')

onMounted(() => {
  map = new Map('map', {
    style: currentStyleUrl.value,
    scene: {
      center: { lng: 116.397, lat: 39.916 },
      zoom: 3
    },
    controller: ['globe', 'showZoom', 'showCompass'],
    type: 'mercator',
  })

  map.on('zoom', () => {
    const zoom = map.getZoom()
    zoomLevel.value = zoom.toFixed(2)
    const matched = styleList.find(item => zoom >= item.min && zoom < item.max)
    if (matched && matched.url !== lastStyleUrl) {
      map.setStyle(matched.url)
      lastStyleUrl = matched.url
      currentStyleUrl.value = matched.url
      currentStyleName.value = matched.name
    }
  })

  // 初始化时获取一次zoom和projection
  map.on('load', () => {
    zoomLevel.value = map.getZoom().toFixed(2)
    if (typeof map.getProjection === 'function') {
      const proj = map.getProjection()
      projectionType.value = typeof proj === 'string' ? proj : (proj?.name || 'mercator')
    }
  })

  // 监听投影切换（如果有）
  if (typeof map.on === 'function') {
    map.on('projectionchange', () => {
      if (typeof map.getProjection === 'function') {
        const proj = map.getProjection()
        projectionType.value = typeof proj === 'string' ? proj : (proj?.name || 'mercator')
      }
    })
  }
})
</script>

<style lang="scss" scoped>
.map-page {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.map-container {
  width: 100%;
  height: 100%;
}
.style-info {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1000;
  background: rgba(255,255,255,0.95);
  border-radius: 8px;
  padding: 10px 18px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  font-size: 15px;
  .style-url {
    color: #0078ff;
    font-weight: bold;
    margin: 0 8px;
    word-break: break-all;
  }
}
</style> 